<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>京东首页右侧固定层</title>
    <link href="css/nav.css" rel="stylesheet">
</head>
<body>
<nav id="nav">
    <li>
        <span></span>
        <p>就东会员</p>
    </li>
    <li><span></span><p>购物车</p></li>
    <li><span></span><p>我的关注</p></li>
    <li><span></span><p>我的足迹</p></li>
    <li><span></span><p>我的消息</p></li>
    <li><span></span><p>咨询JIMI</p></li>
</nav>
<!-- <script src="./js/jquery-1.12.4.js"></script> -->
<script src="./js/jquery-1.8.3.min.js"></script>
<script>
    $(function(){
        // 鼠标移入的事件
        // $("span").mouseenter(function(){
        //     // $(this) 当前移入的span标签，
        //     // next()  当前元素相邻的下一个元素
        //     $(this).next().show();
        // });

        // // 鼠标移出的事件
        // $("span").mouseleave(function(){
        //     $(this).next().hide();
        // });

        // bind 使用 同时绑定多个事件 {}
        // $("span").bind({
        //     "mouseenter":function(){
        //         $(this).next().show();
        //     },
        //     "mouseleave":function(){
        //         $(this).next().hide();
        //     }
        // });

        // // unbind 取消绑定
        // $("span").unbind("mouseleave");

        $("span").hover(
            function(){
                $(this).next().show();
            },
            function(){
                $(this).next().hide();
            }
        );

        // :first 第一个元素
        $("span:first").toggle(
            function(){
                $("body").css("background","red");
            },
            function(){
                $("body").css("background","green");
            },
            function(){
                $("body").css("background","blue");
            }
        );


    })
</script>
</body>
</html>